// fw_normal
/*
想法:
  通过第一个参数确定属性之后, 可以通过
*/

/**
 * 需要处理的问题:
 * 1. 小括号(), 无法解析
 * 2. 颜色的#, 不好处理 (通过正则匹配处理了)
 */

const path = require('path');
const posthtml = require('posthtml');
const fs = require('fs');
const valueMap = require('./valueMap.js');

function htmlExtractor(html, extractInfo) {
  const content = fs.readFileSync(html, 'utf-8');

  const extractPlugin = options => tree => {
    return tree.walk(node => {
      extractInfo.tag.push(node.tag);
      if (node.attrs) {
        extractInfo.id.push(node.attrs.id);
        extractInfo.class.push(node.attrs.class);
      }
      return node;
    });
  };

  posthtml([extractPlugin()]).process(content);

  extractInfo.id = extractInfo.id.filter(Boolean);
  let str = fs.readFileSync('./src/styles/index.css', 'utf-8');
  // 筛选出有 _ 的类名
  let splitArr = [];
  let classMap = {
    o: 'overflow',
    /////////
    ac: 'align-content',
    ai: 'align-items',
    as: 'align-self',
    a: 'animation',
    bg: 'background',
    bgc: 'background-color',
    bgi: 'background-image',
    bgo: 'background-origin',
    bgs: 'background-size',
    bd: 'border',
    bdb: 'border-bottom',
    bdc: 'border-color',
    bdr: 'border-radius',
    bdt: 'border-top',
    bdw: 'border-width',
    b: 'bottom',
    boxs: 'box-sizing',
    c: 'color',
    colg: 'column-gap',
    cols: 'column-span',
    dis: 'display',
    fd: 'flex-direction',
    fw: 'font-weight',
    ff: 'font-family',
    fs: 'font-size',
    fz: 'font-size',
    ga: 'grid-area',
    gc: 'grid-column',
    gce: 'grid-column-end',
    gcg: 'grid-column-gap',
    gcs: 'grid-column-start',
    gg: 'grid-gap',
    gr: 'grid-row',
    gre: 'grid-row-end',
    grg: 'grid-row-gap',
    grs: 'grid-row-start',
    gt: 'grid-template',
    gta: 'grid-template-areas',
    gtc: 'grid-template-columns',
    gtr: 'grid-template-rows',
    hp: 'hanging-punctuation',
    h: 'height',
    jc: 'justify-content',
    ji: 'justify-items',
    l: 'left',
    lh: 'line-height',
    ls: 'list-style',
    lst: 'list-style-type',
    m: 'margin',
    mb: 'margin-bottom',
    ml: 'margin-left',
    mr: 'margin-right',
    mt: 'margin-top',
    maxh: 'max-height',
    maxw: 'max-width',
    minh: 'min-height',
    minw: 'min-width',
    of: 'object-fit',
    op: 'object-position',
    ox: 'overflow-x',
    oy: 'overflow-y',
    p: 'padding',
    pb: 'padding-bottom',
    pl: 'padding-left',
    pr: 'padding-right',
    pt: 'padding-top',
    sb: 'scroll-behavior',
    ta: 'text-align',
    tal: 'text-align-last',
    td: 'text-decoration',
    ti: 'text-indent',
    tj: 'text-justify',
    to: 'transform-origin',
    ts: 'transform-style',
    t: 'top',
    us: 'user-select',
    va: 'vertical-align',
    ws: 'white-space',
    w: 'width',
    wb: 'word-break',
    ww: 'word-wrap',
    z: 'z-index',
    'align-content': 'align-content',
    'align-items': 'align-items',
    'align-self': 'align-self',
    animation: 'animation',
    'animation-delay': 'animation-delay',
    'animation-direction': 'animation-direction',
    'animation-duration': 'animation-duration',
    'animation-fill-mode': 'animation-fill-mode',
    'animation-iteration-count': 'animation-iteration-count',
    'animation-name': 'animation-name',
    'animation-play-state': 'animation-play-state',
    'animation-timing-function': 'animation-timing-function',
    'backface-visibility': 'backface-visibility',
    background: 'background',
    'background-attachment': 'background-attachment',
    'background-color': 'background-color',
    'background-image': 'background-image',
    'background-origin': 'background-origin',
    'background-position': 'background-position',
    'background-repeat': 'background-repeat',
    'background-size': 'background-size',
    border: 'border',
    'border-bottom': 'border-bottom',
    'border-color': 'border-color',
    'border-image': 'border-image',
    'border-radius': 'border-radius',
    'border-style': 'border-style',
    'border-top': 'border-top',
    'border-width': 'border-width',
    bottom: 'bottom',
    'box-shadow': 'box-shadow',
    'box-sizing': 'box-sizing',
    color: 'color',
    'column-count': 'column-count',
    'column-fill': 'column-fill',
    gap: 'gap',
    'column-gap': 'column-gap',
    'column-span': 'column-span',
    'column-width': 'column-width',
    columns: 'columns',
    content: 'content',
    cursor: 'cursor',
    cur: 'cursor',
    direction: 'direction',
    display: 'display',
    flex: 'flex',
    'flex-basis': 'flex-basis',
    'flex-direction': 'flex-direction',
    'flex-flow': 'flex-flow',
    'flex-grow': 'flex-grow',
    'flex-shrink': 'flex-shrink',
    'flex-wrap': 'flex-wrap',
    float: 'float',
    font: 'font',
    'font-family': 'font-family',
    'font-size': 'font-size',
    'font-stretch': 'font-stretch',
    'font-style': 'font-style',
    'font-weight': 'font-weight',
    grid: 'grid',
    'grid-area': 'grid-area',
    'grid-auto-columns': 'grid-auto-columns',
    'grid-auto-flow': 'grid-auto-flow',
    'grid-auto-rows': 'grid-auto-rows',
    'grid-column': 'grid-column',
    'grid-column-end': 'grid-column-end',
    'grid-column-gap': 'grid-column-gap',
    'grid-column-start': 'grid-column-start',
    'grid-gap': 'grid-gap',
    'grid-row': 'grid-row',
    'grid-row-end': 'grid-row-end',
    'grid-row-gap': 'grid-row-gap',
    'grid-row-start': 'grid-row-start',
    'grid-template': 'grid-template',
    'grid-template-areas': 'grid-template-areas',
    'grid-template-columns': 'grid-template-columns',
    'grid-template-rows': 'grid-template-rows',
    'hanging-punctuation': 'hanging-punctuation',
    height: 'height',
    'justify-content': 'justify-content',
    left: 'left',
    'letter-spacing': 'letter-spacing',
    'line-height': 'line-height',
    'list-style': 'list-style',
    'list-style-image': 'list-style-image',
    'list-style-position': 'list-style-position',
    'list-style-type': 'list-style-type',
    margin: 'margin',
    'margin-bottom': 'margin-bottom',
    'margin-left': 'margin-left',
    'margin-right': 'margin-right',
    'margin-top': 'margin-top',
    'max-height': 'max-height',
    'max-width': 'max-width',
    'min-height': 'min-height',
    'min-width': 'min-width',
    'object-fit': 'object-fit',
    'object-position': 'object-position',
    opacity: 'opacity',
    order: 'order',
    outline: 'outline',
    'outline-color': 'outline-color',
    'outline-offset': 'outline-offset',
    'outline-style': 'outline-style',
    'outline-width': 'outline-width',
    overflow: 'overflow',
    'overflow-x': 'overflow-x',
    'overflow-y': 'overflow-y',
    padding: 'padding',
    'padding-bottom': 'padding-bottom',
    'padding-left': 'padding-left',
    'padding-right': 'padding-right',
    'padding-top': 'padding-top',
    perspective: 'perspective',
    'perspective-origin': 'perspective-origin',
    'pointer-events': 'pointer-events',
    position: 'position',
    'po': 'position',
    resize: 'resize',
    right: 'right',
    r: 'right',
    'scroll-behavior': 'scroll-behavior',
    'tab-size': 'tab-size',
    'table-layout': 'table-layout',
    'text-align': 'text-align',
    'text-align-last': 'text-align-last',
    'text-decoration': 'text-decoration',
    'text-decoration-color': 'text-decoration-color',
    'text-decoration-line': 'text-decoration-line',
    'text-decoration-style': 'text-decoration-style',
    'text-indent': 'text-indent',
    'text-justify': 'text-justify',
    'text-overflow': 'text-overflow',
    'text-shadow': 'text-shadow',
    'text-transform': 'text-transform',
    top: 'top',
    transform: 'transform',
    'transform-origin': 'transform-origin',
    'transform-style': 'transform-style',
    transition: 'transition',
    'transition-delay': 'transition-delay',
    'transition-duration': 'transition-duration',
    'transition-property': 'transition-property',
    'transition-timing-function': 'transition-timing-function',
    'unicode-bidi': 'unicode-bidi',
    'user-select': 'user-select',
    'vertical-align': 'vertical-align',
    visibility: 'visibility',
    'white-space': 'white-space',
    width: 'width',
    'word-break': 'word-break',
    'word-spacing': 'word-spacing',
    'word-wrap': 'word-wrap',
    'writing-mode': 'writing-mode',
    'z-index': 'z-index',
  };
  extractInfo.class.filter(item => {
    return item && splitArr.push(...item.split(' '));
  });
  splitArr.forEach(item => {
    let attrName = item.split('_')[0];
    let attrValueStr = item.slice(item.indexOf('_') + 1);
    // 不存在classmap中
    if (!classMap[attrName]) return;
    // 已经有过
    let attrStr = '';
    if (str.includes('.' + item + '{')) return;
    attrValueStr.split('_').forEach(it => {
      it = valueMap[attrName] && valueMap[attrName][it] ? valueMap[attrName][it] : it;
      // 对属性处理
      let pxMapArr = [
        'w',
        'h',
        'width',
        'ml',
        'mr',
        'mt',
        'mb',
        'pt',
        'pb',
        'pl',
        'p',
        't',
        'r',
        'b',
        'l',
        'pr',
        'fz',
        'bdr',
      ];
      // 处理自动加px
      if (pxMapArr.includes(attrName)) {
        it = isNaN(it) ? it : it + 'px';
      }

      // 处理颜色
      if (['bgc', 'bg', 'bdc', 'c', 'bdb', 'border'].includes(attrName)) {
        let reg = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
        reg.test(it) && (it = '#' + it);
      }
      attrStr += ' ' + it;
    });

    str += `.${item}{${classMap[attrName]}:${attrStr};}`;
    str = str.replace(/(\d)p;/g, '$1%;');
  });

  fs.writeFileSync('./src/styles/index.css', str);
}

const purgePlugin = options => {
  const extractInfo = {
    id: [],
    class: [],
    tag: [],
  };
  htmlExtractor(options && options.html, extractInfo);
};
module.exports = purgePlugin;
